<template>
    <view class="content">
        <button @tap="chooseImage()">选择图片</button>
        <image class="image" :src="path"></image>
         <kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200" :height="200"></kps-image-cutter>
    </view>
</template>

<script>
	  import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	    export default {
	        components: {kpsImageCutter},
	        data() {
	            return {
	                url: "",
	                path: ""
	            }
	        },
	        onLoad() {
	
	        },
	        methods: {
	            chooseImage() {
	                uni.chooseImage({
	                    success: (res) => {
	                        // 设置url的值，显示控件
	                        this.url = res.tempFilePaths[0];
	                    }
	                });
	            },
	            onok(ev) {
					let _this =this
	                this.path = ev.path;
	                this.url = "";
					console.log(JSON.stringify(this.path))
					uni.uploadFile({
						url: "http://127.0.0.1:8001" + "/upload/file", //仅为示例，非真实的接口地址
						filePath: this.path,
						name: 'file',
						header:{
							ContentType: "image/jpg"
						},
						formData: {
							'user': 'test'
						},
						success: function(uploadFileRes) {
							let data = JSON.parse(uploadFileRes.data)
							console.log(data.dataMap)
							_this.image = data.dataMap
							console.log("------" + _this.image)
						}
					});
	            },
	            oncancle() {
	                // url设置为空，隐藏控件
	                this.url = "";
					console.log("====oncancle=====")
					
	            }
	        }
	    }
</script>

<style lang="less" scoped>
	.image {
	    width: 200px;
	    height: 200px;
	}
</style>